// 这个文件里面主要处理布局的一些复杂逻辑
// layoutManage.js 要做的事情：
// 🎯 1. 布局状态管理
// 🎯 2. 布局模式配置映射
// 🎯 3. 菜单数据管理（混合布局特有）
// 🎯 4. 布局切换逻辑
// 🎯 5. 响应式适配逻辑

import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useLocalStorage } from '@vueuse/core'
import { useDevice } from '@/composables/useDevice.js'
import { useTheme } from '@/composables/useTheme.js'
import { layoutTransition } from '@/utils/theme/animation.js'
import { useRouteStore } from '@/stores/modules/route'


// 🎯 1. 布局模式枚举
export const LAYOUT_MODES = {
  VERTICAL: 'vertical', // 垂直布局
  HORIZONTAL: 'horizontal', // 水平布局
  VERTICAL_MIX: 'vertical-mix', // 垂直混合布局
  HORIZONTAL_MIX: 'horizontal-mix', // 水平混合布局
}

// 🎯 模块级单例：混合菜单状态（确保全局共享，避免每次调用 useLayoutManage 创建新实例）
const activeFirstLevelMenuKey = ref('')

// 🎯 获取路由 store
const routeStore = useRouteStore()

// 一级菜单列表（从动态路由获取）
const firstLevelMenus = computed(() => {
  const menuTree = routeStore.menuTree
  return menuTree.map(menu => ({
    key: menu.name?.toLowerCase() || menu.path.replace('/', ''),
    label: menu.meta?.title || menu.name,
    icon: menu.meta?.icon || 'Document'
  }))
})

// 当前一级菜单的子菜单（从动态路由获取）
const childLevelMenus = computed(() => {
  const activeKey = activeFirstLevelMenuKey.value
  if (!activeKey) return []
  
  // 查找对应的一级菜单
  const menuTree = routeStore.menuTree
  const activeMenu = menuTree.find(menu => {
    const menuKey = menu.name?.toLowerCase() || menu.path.replace('/', '')
    return menuKey === activeKey
  })
  
  // 如果没有找到或没有子菜单，返回空数组
  if (!activeMenu || !activeMenu.children) {
    return []
  }
  
  // 转换子菜单格式
  const children = activeMenu.children.map(child => ({
    key: child.name?.toLowerCase() || child.path.replace(/\//g, '_'),
    label: child.meta?.title || child.name,
    path: child.path,
    icon: child.meta?.icon || 'Document'
  }))
  
  console.log('🔧 [模块单例] childLevelMenus 计算:', {
    activeKey: activeFirstLevelMenuKey.value,
    children
  })
  
  return children
})

// 设置激活的一级菜单
function setActiveFirstLevelMenuKey(key) {
  console.log('🎯 [模块单例] setActiveFirstLevelMenuKey:', key)
  activeFirstLevelMenuKey.value = key
}
  
// 🎯 2. 默认布局设置
const defaultLayoutSetting = {
  mode: LAYOUT_MODES.VERTICAL, // 默认布局模式 默认垂直布局
  sidebarCollapsed: false, // 侧边栏折叠状态 默认不折叠
  showBreadcrumb: true, // 面包屑显示状态  默认显示面包屑
  showTabs: true, // 标签页显示状态  默认显示标签页
  showFooter: true, // 页脚显示状态  默认显示页脚
  enableAnimation: true, // 动画效果  默认启用动画效果
  reverseHorizontalMix: false // 水平混合布局反转  默认不反转
}
  
 
// 🎯 3. 布局配置映射 (核心！)
const layoutConfigMap = {
    [LAYOUT_MODES.VERTICAL]: {
      name: '垂直布局',
      header: {
        showLogo: false, // 头部是否显示logo  垂直布局不显示    
        showMenu: false, // 头部是否显示菜单  垂直布局不显示    
        showMenuToggler: true, // 头部是否显示菜单切换器  垂直布局显示
        showBreadcrumb: true, // 头部是否显示面包屑  垂直布局显示
        height: 56 // 头部高度  垂直布局56px
      },
      sider: {
        visible: true, // 侧边栏是否显示  垂直布局显示
        showLogo: true, // 侧边栏是否显示logo  垂直布局显示
        width: 240, // 侧边栏宽度  垂直布局240px
        collapsedWidth: 64 // 侧边栏折叠宽度  垂直布局64px
      }
    },
    
    [LAYOUT_MODES.HORIZONTAL]: {
      name: '水平布局',
      header: {
        showLogo: true, // 头部是否显示logo  水平布局显示
        showMenu: true, // 头部是否显示菜单  水平布局显示
        showMenuToggler: false, // 头部是否显示菜单切换器  水平布局不显示
        showBreadcrumb: false, // 头部是否显示面包屑  水平布局不显示
        height: 64 // 头部高度  水平布局64px
      },
      sider: {
        visible: false, // 侧边栏是否显示  水平布局不显示
        showLogo: false, // 侧边栏是否显示logo  水平布局不显示
        width: 0, // 侧边栏宽度  水平布局0px
        collapsedWidth: 0 // 侧边栏折叠宽度  水平布局0px
      }
    },

    [LAYOUT_MODES.VERTICAL_MIX]: {
      name: '垂直混合布局',
      header: {
        showLogo: false, // 头部是否显示logo  垂直混合布局不显示
        showMenu: false, // 头部是否显示菜单  垂直混合布局不显示
        showMenuToggler: true, // 头部是否显示菜单切换器  垂直混合布局显示
        showBreadcrumb: true, // 头部是否显示面包屑  垂直混合布局显示
        height: 56 // 头部高度  垂直混合布局56px
      },
      sider: {
        visible: true, // 侧边栏是否显示  垂直混合布局显示
        showLogo: true, // 侧边栏是否显示logo  垂直混合布局显示
        width: 80, // 主侧边栏较窄，只显示图标
        collapsedWidth: 0, // 侧边栏折叠宽度  垂直混合布局0px
        menuType: 'primary', // 侧边栏菜单类型  垂直混合布局一级菜单
      },
      // 🎯 新增：子侧边栏配置
      subSider: {
          visible: true,          // 显示子侧边栏
          width: 200,             // 子侧边栏宽度
          left: 80,               // 距离主侧边栏80px
          menuType: 'sub'         // 子菜单类型
      }
    },

    [LAYOUT_MODES.HORIZONTAL_MIX]: {
      name: '水平混合布局',
      header: {
        showLogo: true, // 头部是否显示logo  水平混合布局显示
        showMenu: true, // 头部是否显示菜单  水平混合布局显示 头部显示一级菜单
        showMenuToggler: true, // 头部是否显示菜单切换器  水平混合布局显示 显示二级菜单切换按钮
        showBreadcrumb: false, // 头部是否显示面包屑  水平混合布局不显示
        height: 64 // 头部高度  水平混合布局64px
      },
      sider: {
        visible: true, // 侧边栏是否显示  水平混合布局显示
        showLogo: false, // 侧边栏是否显示logo  水平混合布局不显示
        width: 200, // 侧边栏宽度  水平混合布局0px
        collapsedWidth: 0, // 侧边栏折叠宽度  水平混合布局0px
        menuType: 'sub', // 侧边栏菜单类型  水平混合布局垂直菜单
      }
    }
}


// 🎯 4. 混合菜单管理 (模仿 SoyBean 的 useMixMenu)
function useMixMenuManage() {
    const route = useRoute()
    // 当前激活的一级菜单
    const activeFirstLevelMenuKey = ref('')
    
    // 一级菜单列表（显示在头部或主侧边栏）
    const firstLevelMenus = computed(() => {
      // 从路由或菜单数据中获取一级菜单
      return [
        { key: 'dashboard', label: '仪表板', icon: 'dashboard' },
        { key: 'system', label: '系统管理', icon: 'system' },
        { key: 'user', label: '用户中心', icon: 'user' }
      ]
    })
    
    // 当前一级菜单的子菜单   根据激活的一级菜单，自动计算要显示的子菜单
    const childLevelMenus = computed(() => {
      const menuData = {
        'system': [
          { key: 'system_user', label: '用户管理', path: '/system/user' },
          { key: 'system_role', label: '角色管理', path: '/system/role' },
          { key: 'system_menu', label: '菜单管理', path: '/system/menu' }
        ],
        'user': [
          { key: 'user_profile', label: '个人资料', path: '/user/profile' },
          { key: 'user_setting', label: '账户设置', path: '/user/setting' }
        ]
      }
      
      return menuData[activeFirstLevelMenuKey.value] || []
    })
    
    // 设置激活的一级菜单
    function setActiveFirstLevelMenuKey(key) {
      activeFirstLevelMenuKey.value = key
    }
    
    return {
      firstLevelMenus,
      childLevelMenus,
      activeFirstLevelMenuKey,
      setActiveFirstLevelMenuKey
    }
  }

// 上面这个是暂时写死的，后面需要根据实际需求来调整
// 🎯 动态菜单管理版本
// function useMixMenuManage() {
//     const route = useRoute()
//     const activeFirstLevelMenuKey = ref('')
    
//     // 🔗 从 store 或 API 获取动态菜单数据
//     const menuStore = useMenuStore()  // 假设你有菜单状态管理
    
//     // 🎯 一级菜单列表（从后端数据计算）
//     const firstLevelMenus = computed(() => {
//       return menuStore.menuData.map(menu => ({
//         key: menu.name,           // 'system'
//         label: menu.title,        // '系统管理' 
//         icon: menu.icon,          // 'system'
//         path: menu.path,          // '/system'
//         hasChildren: menu.children && menu.children.length > 0
//       }))
//     })
    
//     // 🎯 当前一级菜单的子菜单（从后端数据计算）
//     const childLevelMenus = computed(() => {
//       // 找到当前激活的一级菜单
//       const activeMenu = menuStore.menuData.find(menu => 
//         menu.name === activeFirstLevelMenuKey.value
//       )
      
//       // 返回它的子菜单，转换为标准格式
//       if (activeMenu && activeMenu.children) {
//         return activeMenu.children.map(child => ({
//           key: child.name,        // 'system_user'
//           label: child.title,     // '用户管理'
//           icon: child.icon,       // 'user'  
//           path: child.path        // '/system/user'
//         }))
//       }
      
//       return []
//     })
    
//     // 🎯 根据当前路由自动确定激活的一级菜单
//     function getActiveFirstLevelMenuKey() {
//       const currentPath = route.path  // 比如：'/system/user'
      
//       // 从路径中推断一级菜单
//       const pathSegments = currentPath.split('/').filter(Boolean)
//       const firstSegment = pathSegments[0]  // 'system'
      
//       // 验证这个一级菜单是否存在
//       const menuExists = firstLevelMenus.value.some(menu => menu.key === firstSegment)
      
//       if (menuExists) {
//         setActiveFirstLevelMenuKey(firstSegment)
//       }
//     }
    
//     // 🎯 设置激活的一级菜单
//     function setActiveFirstLevelMenuKey(key) {
//       activeFirstLevelMenuKey.value = key
//       console.log('🎯 一级菜单切换为:', key)
//       console.log('📋 子菜单数据:', childLevelMenus.value)
//     }
    
//     // 🎯 监听路由变化，自动更新菜单状态
//     watch(() => route.path, () => {
//       getActiveFirstLevelMenuKey()
//     }, { immediate: true })
    
//     // 🎯 监听菜单数据变化（后端数据更新时）
//     watch(() => menuStore.menuData, () => {
//       getActiveFirstLevelMenuKey()  // 重新计算激活菜单
//     }, { immediate: true })
    
//     return {
//       firstLevelMenus,           // 动态一级菜单
//       childLevelMenus,           // 动态子菜单
//       activeFirstLevelMenuKey,   // 当前激活的一级菜单
//       setActiveFirstLevelMenuKey // 切换一级菜单的方法
//     }
//   }
  


export function useLayoutManage() {
    const route = useRoute()
    const { isMobile, screenType } = useDevice() // 设备检测
    const { isDark } = useTheme() // 主题状态
    
    // 响应式状态
    
    const layoutSetting = useLocalStorage('vilan-layout-setting', defaultLayoutSetting)// 布局设置（持久化存储）
    const mobileDrawerVisible = ref(false) // 🎯 移动端抽屉状态  控制移动端侧边栏抽屉的显示/隐藏
    
    // 🎯 混合菜单辅助函数（使用模块级单例状态）
    
    // 从路由推断激活的一级菜单
    function getActiveFirstLevelMenuKeyFromRoute() {
      const currentPath = route.path
      const pathSegments = currentPath.split('/').filter(Boolean)
      const firstSegment = pathSegments[0]
      
      const menuExists = firstLevelMenus.value.some(menu => menu.key === firstSegment)
      return menuExists ? firstSegment : (firstLevelMenus.value[0]?.key || 'dashboard')
    }
    
    // 初始化激活菜单
    function initActiveMenu() {
      const key = getActiveFirstLevelMenuKeyFromRoute()
      console.log('🔧 [useLayoutManage] initActiveMenu:', key)
      activeFirstLevelMenuKey.value = key
    }
    
    // 监听路由变化
    watch(() => route.path, () => {
      const currentMode = layoutSetting.value.mode
      if (currentMode === LAYOUT_MODES.VERTICAL_MIX || currentMode === LAYOUT_MODES.HORIZONTAL_MIX) {
        initActiveMenu()
      }
    })
    
    // 当前布局配置
    const currentLayoutConfig = computed(() => {
      return layoutConfigMap[layoutSetting.value.mode] || layoutConfigMap[LAYOUT_MODES.VERTICAL]
    })
    
    // 实际生效的布局模式（移动端强制垂直）
    const actualLayoutMode = computed(() => {
      if (isMobile.value) return LAYOUT_MODES.VERTICAL // 移动端强制垂直布局
      return layoutSetting.value.mode // 桌面端使用用户设置
    })
    
    // 头部属性  主要移动端方面的调整
    const headerProps = computed(() => {
      const config = currentLayoutConfig.value.header
      return {
        ...config,
        height: isMobile.value ? 50 : config.height,
        showBreadcrumb: isMobile.value ? false : config.showBreadcrumb
      }
    })

    // 侧边栏属性
    const siderProps = computed(() => {
        const config = currentLayoutConfig.value.sider
        const result = {
        ...config,
        collapsed: layoutSetting.value.sidebarCollapsed, // 添加折叠状态
        mobileVisible: mobileDrawerVisible.value // 添加移动端抽屉状态
        }
        
        console.log('🔍 [layoutManage] siderProps 计算:', {
          layoutMode: layoutSetting.value.mode,
          configSider: config,
          resultVisible: result.visible
        })
        
        return result
    })
    
    // 布局CSS类
    const layoutClasses = computed(() => [
        `layout-${actualLayoutMode.value}`, // 'layout-vertical'
        `layout-${screenType.value}`, // 'layout-desktop'
        {
        'layout-sidebar-collapsed': layoutSetting.value.sidebarCollapsed,
        'layout-mobile-drawer-open': mobileDrawerVisible.value,
        'layout-animation': layoutSetting.value.enableAnimation,
        'layout-dark': isDark.value
        }
    ])
    
    /**
     * 切换布局模式（带动画优化）
     * @param {string} mode - 布局模式
     */
    function setLayoutMode(mode) {
        if (isMobile.value && mode !== LAYOUT_MODES.VERTICAL) {
        console.warn('移动端只支持垂直布局')
        return
        }
        
        console.log('🎯 布局模式切换为:', mode)
        
        // 使用布局切换动画，避免闪烁
        layoutTransition(() => {
          layoutSetting.value.mode = mode
        })

        // 🎯 如果切换到混合布局，确保混合菜单已初始化
        if (mode === LAYOUT_MODES.VERTICAL_MIX || mode === LAYOUT_MODES.HORIZONTAL_MIX) {
          // 延迟初始化，确保布局切换完成
          setTimeout(() => {
            console.log('🔧 混合布局切换后初始化菜单')
            initActiveMenu()
          }, 100)
        }
    }

    // 切换侧边栏
    function toggleSidebar() {
        if (isMobile.value) { //移动端点击菜单按钮  → mobileDrawerVisible: false → true (抽屉打开)
        mobileDrawerVisible.value = !mobileDrawerVisible.value // 移动端：控制抽屉
        } else { // 桌面端点击折叠按钮 → sidebarCollapsed: false → true (侧边栏变窄)
        layoutSetting.value.sidebarCollapsed = !layoutSetting.value.sidebarCollapsed  // 桌面端：控制折叠
        console.log('🔄 [layoutManage] toggleSidebar 折叠状态切换:', {
          collapsed: layoutSetting.value.sidebarCollapsed,
          layoutMode: layoutSetting.value.mode
        })
        }
    }
    
    // 监听设备变化
    watch(isMobile, (mobile) => {
        if (mobile) {
        mobileDrawerVisible.value = false // 关闭抽屉
        if (layoutSetting.value.mode !== LAYOUT_MODES.VERTICAL) { // 移动端：如果当前不是垂直布局，则切换为垂直布局
            setLayoutMode(LAYOUT_MODES.VERTICAL) // 切换为垂直布局
        }
        }
    })

    return {
        // 状态
        layoutSetting, // 用户的布局设置
        mobileDrawerVisible, // 移动端抽屉状态
        
        // 计算属性
        currentLayoutConfig, // 当前布局的完整配置
        actualLayoutMode, // 实际生效的布局模式
        headerProps,  // 头部组件需要的属性
        siderProps, // 侧边栏组件需要的属性
        layoutClasses, // 布局容器的CSS类名
        
        // 🎯 混合菜单管理（直接导出，全局共享）
        activeFirstLevelMenuKey,
        firstLevelMenus,
        childLevelMenus,
        setActiveFirstLevelMenuKey,
        initActiveMenu,
        
        // 方法
        setLayoutMode, // 切换布局模式的方法
        toggleSidebar, // 切换侧边栏的方法
        
        // 常量
        LAYOUT_MODES // 布局模式枚举
      }
}